<template>
	<view>
		<OrderList :orderListProp="orderList" :orderBaseProp="orderBase"></OrderList>
		<view class="return_form_c">
			<view class="return_good_content_c">
				<view class="title">
					请选择退货原因：
				</view>
				<input v-model="subParams.reason" class="return_reason" type="text" placeholder="请输入退货原因" />
			</view>
			<view class="return_good_content_c">
				<view class="title">
					请选择退货地址：
				</view>
				<view class="choiceAddress" @tap='openPopup'>
					{{addressText?addressText: '请选择退货地址'}}
				</view>
			</view>
			<view class="return_good_content_c">
				<view class="title">
					请描述问题描述：
				</view>
				<textarea class="problem_desc" placeholder="请输入问题描述" v-model="subParams.description"></textarea>
			</view>
			<view class="tip">
				<text>温馨提示：</text>
				<text>上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张</text>
				<view class="unloading_btn">
					<view class="load_btn" @tap="upLoad">
						<image src="../../../../static/image/jia.png" mode="widthFix"></image>
						<text>上传图片</text>
					</view>
					<view class="img_c">
						<view class="img_item" v-for="(item,index) in imgList" :key='index'>
							<image :src="item" mode="scaleToFill"></image>
							<image @tap="closeImg(index)" class="close_btn" src="../../../../static/image/close.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @tap="sub">
			提交
		</view>
		<uni-popup ref="addressPopup" type="bottom">
			<view class="popup_c">

				<view class="btn_bar">
					<view class="channel" @tap="channelC">
						取消
					</view>
					<view class="confirm" @tap="confirmC">
						确定
					</view>
				</view>
				<picker-view :value="value" class="picker_view" @change="pickerChange">
					<picker-view-column class='picker_column'>
						<view class="item" v-for="(item,index) in addressList" :key="index">{{item.addressName}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import request from '../../../../api/request.js';
	import OrderList from '../../../../components/orderList.vue';
	import {
		defaultUrl
	} from '../../../../api/defaultUrl.js';
	export default {
		data() {
			return {
				orderList: [],
				orderBase: {},
				addressList: [],
				value: [0],
				addressText: '',
				imgList: [],
				subParams: {
					proofPics: '',
					companyAddressId: '',
					count: 0,
					description: '',
					orderId: '',
					orderItemId: '',
					reason: ''
				}

			};
		},
		methods: {
			async requestOrderList(option) {
				const res = await request({
					url: `/order/getPreOrderById/${option.id}`
				})
				this.orderList = res.data.data.orderItems.filter((item, index) => {
					return index == +option.index
				});
				this.orderBase = res.data.data.orderBase;
			},
			openPopup() {
				this.$refs.addressPopup.open();
			},
			async requestAddressList() {
				const res = await request({
					url: `/orderReturn/getCompanyAddrss`,
				})
				this.addressList = res.data.data.items;
			},
			// 取消
			channelC() {
				this.$refs.addressPopup.close();
			},
			// 确定
			confirmC() {
				this.$refs.addressPopup.close();
				this.subParams.companyAddressId = this.addressList[this.value].id;
				this.addressText = this.addressList[this.value].addressName;
			},
			pickerChange(e) {
				this.value[0] = e.detail.value[0];
			},
			upLoad() {
				const _this = this;
				uni.chooseImage({
					success(res) {
						if (_this.imgList.length > 2) {
							uni.showToast({
								title: '图像不能超出3张',
								icon: 'none'
							})
						} else {

							const imageList = res.tempFilePaths;
							_this.imgList.push(...imageList)

						}
					}
				})
			},
			async sub() {
				const _this = this;
				console.log(this.orderList);
				const resList = this.imgList.map(item => {
					return new Promise ((resolve,reject) => {
						uni.uploadFile({
							url: defaultUrl + '/orderReturn/uploadImg',
							filePath: item,
							name: 'file',
							success(res) {
								res = JSON.parse(res.data);
								// _this.imageUrl += res.data.fileUrl;
								resolve(res.data.fileUrl)
							}
						})
					})
				})
				Promise.all(resList).then(function(resList) {
					_this.subParams.proofPics = resList.join();
					_this.subParams.count = _this.orderList[0].productQuantity;
					_this.subParams.orderId = _this.orderList[0].orderId;
					_this.subParams.orderItemId = _this.orderList[0].id;
					// console.log(_this.subParams);
					request({
						url: '/orderReturn/addOrderReturnApply',
						method: 'post',
						data: _this.subParams
					}).then(res => {
						if(res.data.success) {
							uni.showToast({
								title:'退货成功'
							})
							setTimeout( ()=> {
								uni.navigateBack()
							}, 1500)
						}
					})
					
				})
			},
			closeImg(index) {
				this.imgList.splice(index, 1);
			}
		},
		onLoad(option) {
			this.requestOrderList(option);
			this.requestAddressList();
		},
		components: {
			OrderList
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 100rpx;
	}

	.return_form_c {
		width: 90%;
		font-size: $uni-font-size-24;
		margin: auto;
		margin-top: 30rpx;
		background-color: #fff;

		.return_good_content_c {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 30rpx;
			border: 2rpx solid #e2e2e2;

			.title {
				width: 300rpx;
			}

			.problem_desc {
				font-size: $uni-font-size-24;
			}

			.return_reason {
				text-align: right;
			}

			.return_reason {
				font-size: inherit;
			}

			.problem_desc {
				height: 200rpx;
			}
		}

		.tip {
			padding: 40rpx 20rpx;

			text {
				&:nth-child(1) {
					display: block;
					font-size: $uni-font-size-lg;
					font-weight: 600;
				}
			}

			.unloading_btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 50rpx;

				.load_btn {
					width: 140rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 80rpx;
					}
				}

				.img_c {
					display: flex;
					justify-content: flex-start;
					padding: 0 20rpx;
					width: 480rpx;
					height: 160rpx;

					align-items: center;

					.img_item {
						position: relative;
						width: 140rpx;
						height: 140rpx;
						overflow: hidden;
						padding: 20rpx;

						.close_btn {
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							top: 0rpx;
							right: 0;
						}

						image {
							width: 100%;
							height: 100%;
						}

					}
				}
			}
		}
	}

	.btn {
		width: 400rpx;
		height: 120rpx;
		color: #fff;
		margin: 200rpx auto;
		text-align: center;
		line-height: 100rpx;
		background-color: $themeColor;
	}

	.popup_c {
		background-color: #fff;

		.btn_bar {
			view {
				width: 100rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
			}

			display: flex;
			justify-content: space-between;
			padding: 20rpx;
		}

		.picker_view {
			box-sizing: border-box;
			padding-top: 100rpx;
			width: 100%;
			height: 400rpx;

			.picker_column {
				text-align: center;
			}

		}
	}
</style>
